<template>
  <div class="message-card">
    <div class="message-card__header">
      <el-avatar :src="message.user.avatar.url"></el-avatar>
      <div class="header-info__body">
        <span class="info-name">{{message.user.name}}</span>
        <span class="info-time">{{message.created_at | timeFilter('before')}}</span>
      </div>
    </div>
    <div class="message-card__content">
      {{message.content}}
    </div>
    <div class="message-card__footer">
      <el-button type="text"
                 class="reply"
                 @click="replyMessage(message)">回复</el-button>
      <el-button type="text"
                 class="report"
                 @click="report(message)">举报</el-button>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'message-card',
  props: {
    message: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      form: {
        content: undefined,
        reply_id: undefined
      },
      replyMessageForm: {},
    }
  },
  computed: {
    ...mapGetters('login', ['logined']),
  },
  methods: {
    replyMessage (message) {
      if (!this.logined) {
        this.$message({
          message: '登录后才能回复',
          type: 'warning',
          offset: 10
        });
        return;
      }
      const { user: { id: user_id, name }, id: reply_id, content } = message
      this.replyMessageForm = { user_id, name, reply_id, content }
      this.form.reply_id = reply_id
    },
    report (message) {
      this.$message({
        message: '举报成功，管理员将尽快处理',
        type: 'success',
        offset: 10
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.message-card {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #f6f6f6;
  text-align: left;
  &:nth-last-child(1) {
    border-bottom: none;
  }
  &:hover {
    .report {
      display: inline-block;
    }
  }
  &__header {
    display: flex;
    justify-content: flex-start;
    padding: 8px 0;
    .header-info__body {
      padding-left: 16px;
      display: flex;
      flex-direction: column;
      .info-name {
        font-size: 15px;
        color: #333;
      }
      .info-time {
        font-size: 12px;
        color: #969696;
      }
    }
  }
  &__content {
    padding: 10px 0;
  }
  &__footer {
    .report {
      display: none;
    }
  }
}
</style>